<!DOCTYPE html>
<html lang="CN-ch">
<head>
 <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <title>蹴鞠</title>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script>
 $(document).ready(function(){
 var a = 1;
 $('#hideButton').click(function(){
 if(a === 1){
 a = 2;
 } else {
 a = 1;
}
 $('#human').attr('src', 'image\\cuju' + a + '.jpg');
});

$('#okButton').click(function(){
$('#mytc').hide();
 });
 });
 </script>
 <style>
 html,body{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 }
.container{
 max-width: 99%;
 position: relative;
 margin: 0 auto;
 text-align: center;
      height: 100vh;
      overflow: hidden;
    }
    .bg{
      position: relative;
      margin: auto;
      width: fit-content;
      overflow: hidden;
    }
    .bgimg{
      max-width: 100%;
      max-height: 100%;
      height: 100vh;
    }

 .tc{
 position: absolute;
      background-image: url("image\\tanchuang.png");
      background-size: cover;
      top: 30%;
      left: 10%;
      display: flex;
      border-radius: 10px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      z-index: 1;
      animation: zoomIn 0.5s forwards;
      background-repeat: no-repeat;
      width: 80%;
      height: 30%;
    }

    @keyframes zoomIn {
      from {
       transform: scale(0.5);
      }
      to {
       transform: scale(1);
      }
     }
        #hideButton{
      position: absolute;
      top: 0;
      left: 38%;
      width: 33%;
      height: 20%;
      background-color: transparent; /* 设置按钮背景为透明 */
      border: none; /* 去掉按钮边框 */
      cursor: pointer; /* 鼠标悬停时显示指针 */

    }
  </style>
</head>
<body>
  <div class="container">
    <div class="bg">
      <button id="hideButton"></button>
      <img class="bgimg" src="image\cuju1.jpg" id="human">
      <div class="tc" id="mytc">
        <p>选择喜欢的蹴鞠样式，点击人物，开始运动</p >
        <button id="okButton">OK</button>
      </div>
    </div>
  </div>
</body>
</html>
